<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <title>Document06-1</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"
          crossorigin="anonymous"/>
</head>

<body>
<div class="container">
    <h2 class="page-header">Promise 封装 AJAX 操作</h2>
    <!-- 需求：点击按钮，2s后显示是否抽奖（百分之三十的概率中奖） -->
    <button class="btn btn-primary" id="btn">点击发送 AJAX</button>
</div>

<script>

    var btn = document.querySelector('.btn');

    // demo01 - 未使用 Promise
    // btn.addEventListener('click', () => {
    //     //4.创建ajax实例对象
    //     const xhr = new XMLHttpRequest();
    //     //5.打开请求
    //     xhr.open('get','https://api.apiopen.top2');
    //     //6.发送请求
    //     xhr.send();
    //     //7.利用onreadystatechange事件
    //     xhr.onreadystatechange = function(){
    //         //8.判断
    //         if(xhr.readyState == 4){
    //             if(xhr.status == 200){
    //                 console.log("success: "+xhr.responseText);
    //             }else{
    //                 console.log(xhr.status);
    //             }
    //         }
    //     }
    // })

    // demo02 - 使用 Promise
    btn.addEventListener('click', () => {
        const p = new Promise((resolve, reject)=> {
            //4.创建ajax实例对象
            const xhr = new XMLHttpRequest();
            //5.打开请求
            xhr.open('get', 'https://api.apiopen.top');
            //6.发送请求
            xhr.send();
            //7.利用onreadystatechange事件
            xhr.onreadystatechange = function () {
                //8.判断
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        resolve("success: " + xhr.responseText);
                    } else {
                        reject(xhr.status);
                    }
                }
            }
        });

        p.then((value)=>{
            console.log(value);
            },(reason)=>{
                console.warn(reason)
            }
        )
    })

    //     //30%中奖概率 1-100
    //     //获取从1-100的一个随机数
    //     //定时器
    //     setTimeout(() => {
    //         let n = rand(1, 100)
    //         if(n <= 30) {
    //             resolve(n)
    //         } else {
    //             reject(n)
    //         }
    //     }, 1000)
    // })
    //

</script>

</body>
</html>
